<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%
        request.setAttribute("phone",request.getParameter("phone"));
        Cookie[] cookies = request.getCookies();//创建一个cookie集合并拿到cookie放入创建好的cookie集合里面
    %>
</head>
<body>
<div class="cp-dialog">
    <div class="cp-dialog-content">
        <a href="#" role="button" class="cp-dialog-close">
            <span class="span1" id="close-cp">&#10006</span>
        </a>
        <div class="cp-dialog-header">
            <h3 class="font-b">验证手机</h3>
            <div class="cp-msg cp-msg-block">
                <i class="image-icon msg-icon"></i>
                <span>校验码已发送到你的手机，15分钟内输入有效，请勿泄漏</span>
            </div>
        </div>
        <div>
            <form id="check-phone">
                <div class="form-list">
                    <div class="form-group">
                        <div class="form-item">
                            <span class="form-value">手机号码</span>
                            <span id="phone-text">${phone}</span>
                        </div>
                        <div class="form-item">
                            <span class="form-value">验证码</span>
                            <input class="form-text" id="phoneCode"/>
                            <button type="button" class="cp-btn-week cp-btn1 ty-btn" id="accept">免费获取验证码</button>
                            <div class="cp-msg" id="error-message">
                                <i class="image-icon children_icon2"></i>
                                <span>验证码已发送至你的手机，请查收</span>
                            </div>
                        </div>
                        <div class="form-item">
                            <button type="submit" class="ty-btn font-b cp-btn2 next-red">确认</button>
                            <template>
                                <el-button type="text" id="code-error" @click="open1"></el-button>
                            </template>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    /** element 弹出框*/
    var Main = {
        methods: {
            open1() {
                this.$notify.error({
                    title: '错误',
                    message: '您的验证码输入错误！'
                });
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#check-phone');

    /** jquery 事件方法 */
    $(function () {
        // 加载页面，已经发送验证码，使用改变按钮状态
            $("body").ready(function () {
                var btn = $("#accept");
                btn.removeClass("cp-btn1").addClass("cp-btn1-click");
                var time = 59;
                btn.text("重发验证码("+(time+1)+" s)").prop("disabled",true);
                var timer = setInterval(function () {
                    if(time == 0){
                        btn.removeClass("cp-btn1-click").addClass("cp-btn1");
                        btn.text("重新发送");
                        btn.prop("disabled",false);
                        clearInterval(timer);
                    } else{
                        btn.text("重发验证码("+time+" s)");
                        time--;
                    }
                }, 1000);
            })

        /**
         * 点击再次发送验证码 （需要做限制）
         */
        $('#accept').click(function () {
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/register/send_code.htm",
                async:false,
                data: {'phone': $('#phone-text').text()},
                success:function (html) {
                    $(".cp-dialog-big").html(html);
                }
            })
        });

        /**
         * 点击确认按钮事件
         */
        $('#check-phone').submit(function (event) {
            // 获取对应cookie
            var value = $.cookie($('#phone-text').text());
            var phone = $("#phone-text").text();
            removeCookie(phone);
            alert(value+"这是正确验证码");
            if(null == value || ''==value){
                $('code-error').click();
                return;
            }
            // 获取用户输入的验证码输入框，和提示块，先判断
            var code = $('#phoneCode');
            var img = $('#error-message i');
            var text = $('#error-message span');
            text.css('color','red');
            var msg = "";
            if(code.val().length!=6){
                msg = "校验码是6位数字，请重新输入";
                img.removeClass("children_icon2").addClass("children_icon1");
            } else if(code.val()!=value){
                msg = "校验码不正确，请重新输入";
                img.removeClass("children_icon2").addClass("children_icon1");
            } else{
                img.removeClass("children_icon1").addClass("children_icon2");
               // 判断该手机是否存在数据库，并获取一系列数据
                $.post(
                    "${pageContext.request.contextPath}/register/contrast_phone.htm",
                    {"phone":phone},
                    function (data) {
                        var json = eval("("+ data +")");
                        var isHave = json.ishave;
                        if(isHave){
                            // 设置手机验证END2元素，设置显示
                            $(".ks-dialog").show();
                            var head = json.head;
                            var name = json.name;
                            var phone = json.phone;
                            // 用户名需要进行加密隐藏
                            var returnJson = Totoro.getStrse(name.toString().length, name.toString());
                            // 根据长度生成隐藏字符
                            var newName = returnJson.start;
                            for (var i = 0; i < name.toString().length-2; i++) {
                                newName+="*";
                            }
                            newName+=returnJson.end;
                            $("#login-head").attr("src",json.head);
                            $("#login-name").text(newName);
                            $("#login-phone").text(phone);
                        } else{
                            window.location.href="register/save_info.htm?phone="+$('#phone-text').text();
                        }
                    });
            }
            text.text(msg);
            event.preventDefault();
        });


        // 点击关闭窗口
        $("#close-cp").click(function () {
            // 设置频繁状态
            isFrequently = true;
            $(".cp-dialog-big").hide();
            isCheck = false;
            $('#drag').html("").sliding();
            // 请求一次验证码，需要过一分钟再次请求验证码，使用计时器进行判断
            var i = 0;
            var it = setInterval(function () {
                i++
                console.log(i);
                if(i >= 60){
                    clearInterval(it);
                    isFrequently = false;
                }
            },1000);
        })

    });

    /**
     * 获取混搭随机数
     * @param length
     * @returns {string}
     */
    function getRc(length) {
        var str="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        var sb = "";
        for(var i=0;i<length;i++){
            var number = Math.floor(Math.random()*(str.length+1));
            sb+=str.charAt(number);
        }
        return sb;
    }


    /**
     * 根据cookie值删除cookie
     * @param value[cookie-value]
     * @returns {string}
     */
    function removeCookie(value) {
        var cookieValue = "";
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = cookies[i];
                // cookie-key
                var str1=cookie.substring(0, cookie.indexOf("="));
                // cookie-value
                var str2=cookie.substring(str1.length+1, cookie.length);
                if(value == str2){
                    alert(str1);
                    $.cookie(str1,null,{path: '/'});
                }
            }
        }
        return cookieValue;
    }

</script>
</html>
